<template>
  <div id="box">
    <!-- 导航栏 -->
    <van-nav-bar placeholder title="收藏" fixed>
      <template #left>
        <van-icon
          name="revoke"
          color="#fdc03a"
          size="25"
          @click="$router.go(-1)"/>
      </template>
    </van-nav-bar>
    <!-- 下拉刷新 -->
    <van-pull-refresh
      v-model="isLoading"
      success-text="刷新成功"
      @refresh="onRefresh">
      <!-- 用户收藏 -->
      <div class="usercollect" v-if="collect">
        <div class="collect_list" v-for="(item, i) in collect" :key="i">
          <div @click="$router.push(`/detail?id=${item.did}`)">
            <!-- 用户资料 -->
            <div class="user">
              <van-image
                width="8vw"
                height="8vw"
                round
                :src="`http://39.108.211.154${item.uimg}`"/>
              <span>{{ item.d_uname }}</span>
            </div>
            <!-- 文章简介 -->
            <div class="article">
              <div>{{ item.dtitle }}</div>
              <p v-html="item.dtext"></p>
            </div>
            <!-- 攻略图片 -->
            <div class="pic">
              <img :src="`http://39.108.211.154${item.dimg}`" />
            </div>
          </div>
          <!-- 评论收藏 -->
          <div class="collect">
            <div class="coll_date">
              发布日期: {{ item.ddate.slice(0, 10) }}
            </div>
            <div>
              <span @click="$router.push(`/detail?id=${item.did}`)">
                <van-image width="5vw" height="5vw" src="/cs-img/pl.png"/>&nbsp;
                <span>({{ item.num > 0? item.num : 0 }})</span>
              </span>
              <span>
                <van-image
                  width="5vw"
                  height="5vw"
                  src="/cs-img/sc-active.png"
                  @click="detele(item.did)"/>
                <span>已收藏</span>
              </span>
            </div>
          </div>
        </div>
        <van-empty
          v-if="usernum.length == 0"
          image-size="250px"
          description="空空如也,快去收藏"/>
      </div>
    </van-pull-refresh>
  </div>
</template>

<script>

import { Toast } from 'vant';

export default {
  data() {
    return {
      // 下拉刷新11
      isLoading: false,
      // 请求到所有的收藏攻略
      collect: [],
      // 评论数量
      collectnum: [],
      usernum: 0,
    };
  },
  mounted() {
    // 根据vuex的user查询到的用户收藏的攻略
    this.axios.get(`http://39.108.211.154:8080/me_detail_uco?username=${this.$store.state.user}`).then((res) => {
      this.usernum = res.data;
      // console.log('用户收藏的攻略id:',this.usernum);
      let num = [];
      res.data.forEach((item) => {
        num.push(item.uco_did);
      });
      num.forEach((num, index) => {
        // 查询评论数量
        this.axios.get(`http://39.108.211.154:8080/num_comment?did=${num}`).then((res) => {
          this.collectnum.push(res.data[0].num);
        });
        // 查询用户资料
        this.axios.get(`http://39.108.211.154:8080/like_uco_text?lid=${num}`).then(res => {
          // 查询文章详情
          this.axios.get(`http://39.108.211.154:8080/detail_text?did=${num}`).then(ress => {
            // 将用户信息表中的uimg属性拼接到文章详情表中
            ress.data[0].uimg = res.data[0].uimg
            ress.data[0].num = this.collectnum[index];
            // 依次添加到this.userlist
            this.collect.push(ress.data[0])
          })
        })        
      });
      console.log('用户收藏的攻略: ', this.collect);
    });
  },
  methods: {
    // 下拉刷新
    onRefresh() {
      setTimeout(() => {
        this.isLoading = false;
        this.$router.go(0);
      }, 1000);
    },
    detele(i) {
      console.log("i:", i);
      let url = `http://39.108.211.154:8080/unuco_detail`;
      let params = `uco_username=${this.$store.state.user}&uco_did=${i}`;
      this.axios.post(url, params).then((res) => {
        console.log(res);
        this.$router.go(0);
        Toast({
          message: '已取消收藏',
          icon: 'star-o'
        })
      });
    },
  },
};
</script>

<style lang="scss" scoped>
#box {
  background-color: rgb(249, 249, 249);
}
::v-deep.van-pull-refresh{
  min-height: calc(100vh - 46px);
  margin-top: 5px;
}
// 收藏攻略列表样式
.usercollect {

  .collect_list {
    background-color: #fff;
    margin-bottom: 10px;
    box-sizing: border-box;
    padding: 10px 12px;
    width: 100%;
    // 用户资料
    .user {
      width: 100%;
      display: flex;
      .van-image {
        display: block;
        margin-right: 10px;
      }
      span {
        line-height: 8vw;
        color: black;
        font-size: 3.5vw;
      }
    }
    // 文章简介
    .article {
      margin: 2.5vw 0;
      div {
        margin-bottom: 2vw;
        font-size: 5vw;
        font-weight: 500;
        color: black;
        margin-left: 10px;
      }
      p {
        font-size: 3.5vw;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
    }
    // 文章图片
    .pic {
      overflow: hidden;
      width: 100%;
      border-radius: 2vw;
      img {
        display: block;
        width: 100%;
        height: 48vw;
      }
    }
    .collect {
      display: flex;
      justify-items: center;
      justify-content: space-between;
      font-size: 3vw;
      margin: 8px 5px 0 0;
      >div{
        display: flex;
        justify-items: center;
        >span {
          display: flex;
          align-items: center;
          margin-left: 20px;
          span {
            line-height: 5vw;
            margin-left: 3px;
          }
        }
      }
      .coll_date{
        color: rgb(255, 136, 0);
        font-size: 3.5vw;
      }
    }
  }
}
</style>